<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <!-- Favicon 和图标 - Kexio品牌立方体 -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/favicon.svg" />
    <meta name="theme-color" content="#000000" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Kexio权限管理系统</title>
    <meta name="description" content="基于Vue3 + Element Plus的权限管理系统" />
    <meta name="keywords" content="Vue3,Element Plus,权限管理,RBAC" />
    <!-- 引入Font Awesome图标 - 匹配原型设计 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  </head>
  <body>
    <div id="app">
      <style>
        .initial-loading {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .loading-spinner {
          width: 40px;
          height: 40px;
          border: 4px solid #f3f3f3;
          border-top: 4px solid #409EFF;
          border-radius: 50%;
          animation: spin 1s linear infinite;
          margin-bottom: 20px;
        }
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        .loading-text {
          color: #666;
          font-size: 14px;
        }
      </style>
      <div class="initial-loading">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在加载系统...</div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
